<template>
  <el-card>
    <!-- <FilterBox :column="column" :data-obj.sync="listQuery" @search="fetchData" /> -->
    <el-row class="mt10 mb10">
      <el-col :span="18">
        <el-button type="primary" @click="toAdd">新增</el-button>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="success" style="margin-left: 20px" @click="dialogVisible = true">同步</el-button>
      </el-col>
    </el-row>
    <Table :field-list="fieldList" :data="list">
      <template v-slot:set="{ row }">
        <el-button type="text" @click="toEdit(row)">编辑</el-button>
        <el-button type="text" @click="toDetail(row)">详情</el-button>
        <el-button class="color-red" type="text" @click="delHandler(row)">删除</el-button>
      </template>
    </Table>
    <Pagination v-show="listQuery.total > 0" :total="listQuery.total" :page.sync="listQuery.pageNumber" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <!-- 新增同步对话框 -->
    <el-dialog title="页面同步" :visible.sync="dialogVisible" width="30%">
      <div class="dialog-content">
        <section>
          <el-select v-model="asyncSystemValue" placeholder="Select">
            <el-option v-for="item in asyncSystemOption" :key="item.value" :label="item.text" :value="item.value" />
          </el-select>
        </section>
        <section style="margin-top:30px; line-height:35px">
          <div>
            <el-button type="primary" style="margin-bottom: 15px;" @click="reverseSelection">
              反选同步页面
            </el-button>
          </div>
          <el-checkbox-group v-model="asyncSystemModuulesSel" class="module-checkboxes">
            <el-checkbox v-for="item in asyncSystemModuules" :key="item.value" :label="item.value" style="width: 33%;">
              {{ item.text }}
            </el-checkbox>
          </el-checkbox-group>
        </section>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-left: 20px" @click="asyncSystem">同步</el-button><el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { getCateList, getPageList, delPage, asyncSystem } from '@/api/index'
import FilterBox from '@/components/FilterBox/index.vue'
import Table from '@/components/Table/index.vue'
import Pagination from '@/components/Pagination/index.vue'
export default {
  name: '',
  components: { FilterBox, Table, Pagination },
  data() {
    return {
      currentRole: 'adminDashboard',
      asyncSystemValue: 'en',
      asyncSystemOption: [
        {
          value: 'zh',
          text: '中文'
        },
        {
          value: 'en',
          text: '英语'
        },
        {
          value: 'de',
          text: '德语'
        },
        {
          value: 'ja',
          text: '日语'
        },
        {
          value: 'ko',
          text: '韩语'
        },
        {
          value: 'ru',
          text: '俄罗斯'
        },
        {
          value: 'es',
          text: '西班牙语'
        },
        {
          value: 'pt',
          text: '葡萄牙语'
        },
        {
          value: 'fr',
          text: '法语'
        },
        {
          value: 'vi',
          text: '越南'
        },
        {
          value: 'ar',
          text: '阿拉伯'
        },
        {
          value: 'it',
          text: '意大利'
        },
        {
          value: 'tr',
          text: '土耳其'
        },
        {
          value: 'pl',
          text: '波兰'
        },
        {
          value: 'id',
          text: '印尼'
        },
        {
          value: 'th',
          text: '泰国'
        },
        {
          value: 'ms',
          text: '马来'
        }
      ],
      asyncSystemModuulesSel: ['index', 'news', 'medium', 'about', 'aboutdev', 'aboutsec',
        'aboutope', 'aboutrecruit', 'aboutdown', 'aboutpower', 'quality',
        'qualitydetection', 'qualitymanufacture', 'qualityequipment',
        'qualityservice', 'qualitypackage', 'qualitynew', 'contact',
        'contactmedia', 'contactposition', 'composition', 'center',
        'detail', 'product', 'pagestyle', 'cnmapsh', 'cnmapwuhu',
        'sitemap', 'videopage'],
      asyncSystemModuules: [
        { value: 'index', text: '首页' },
        { value: 'news', text: '新闻' },
        { value: 'medium', text: '媒体库' },
        { value: 'about', text: '关于我们-团队实力' },
        { value: 'aboutdev', text: '关于我们-可持续发展' },
        { value: 'aboutsec', text: '关于我们-安全第一' },
        { value: 'aboutope', text: '关于我们-精细化运营' },
        { value: 'aboutrecruit', text: '关于我们-招聘中心' },
        { value: 'aboutdown', text: '关于我们-下载中心' },
        { value: 'aboutpower', text: '关于我们-能源设备' },
        { value: 'quality', text: '质量保证' },
        { value: 'qualitydetection', text: '质量保证-检测设备' },
        { value: 'qualitymanufacture', text: '质量保证-制程工艺' },
        { value: 'qualityequipment', text: '质量保证-生产设备' },
        { value: 'qualityservice', text: '质量保证-客户服务' },
        { value: 'qualitypackage', text: '质量保证-包装标准' },
        { value: 'qualitynew', text: '质量保证-新品研发' },
        { value: 'contact', text: '联系我们-询盘表单提交' },
        { value: 'contactmedia', text: '联系我们-社交媒体' },
        { value: 'contactposition', text: '联系我们-公司位置' },
        { value: 'composition', text: '集团组成' },
        { value: 'center', text: '产品中心' },
        { value: 'detail', text: '产品详情' },
        { value: 'product', text: '产品应用' },
        { value: 'pagestyle', text: '模板页面' },
        { value: 'cnmapsh', text: 'sh地图' },
        { value: 'cnmapwuhu', text: 'wuhu地图' },
        { value: 'sitemap', text: '网站导航' },
        { value: 'videopage', text: '视频页' }
      ],
      listQuery: {
        pageNumber: 1,
        pageSize: 100,
        total: 0
      },
      column: [
        {
          type: 'select',
          label: '类型',
          fieldName: 'category_id',
          list: () => this.lst_cate,
          labelField: 'name',
          valueField: 'id'
        }
      ],
      fieldList: [
        {
          label: '操作',
          prop: 'set',
          type: 'slot',
          slotName: 'set',
          width: '160'
        },
        { label: '标题', prop: 'name', minWidth: '120' },
        { label: '分类id', prop: 'page', minWidth: '120' },
        { label: '创建时间', prop: 'createtime_text', width: '170' },
        { label: '更新时间', prop: 'updatetime_text', width: '170' }
      ],
      list: [],
      lst_cate: [],
      // 新增对话框显示控制变量
      dialogVisible: false
    }
  },
  async created() {
    const res = await getCateList({ pid: '14' })
    this.lst_cate = res.data || []
    this.fetchData()
  },
  methods: {
    reverseSelection() {
      // 获取所有可选项的value数组
      const allValues = this.asyncSystemModuules.map(item => item.value)
      // 筛选出未选中的项，实现反选
      this.asyncSystemModuulesSel = allValues.filter(value =>
        !this.asyncSystemModuulesSel.includes(value)
      )
    },
    async fetchData() {
      const res = await getPageList(this.listQuery)
      this.list = res?.data || []
      // this.listQuery.total = res.data.total
    },
    toAdd() {
      this.$router.push('/add-page')
    },
    toDetail(row) {
      this.$router.push('/detail-page?type=detail&id=' + row.id)
    },
    toEdit(row) {
      this.$router.push('/edit-page?id=' + row.id)
    },
    async asyncSystem() {
      // 将选中的页面数组转换为逗号分隔的字符串
      const selectedModules = this.asyncSystemModuulesSel.join(',')
      debugger
      const res = await asyncSystem(this.asyncSystemValue, selectedModules)
      debugger
      if (res === 'done') {
        this.$message({
          type: 'success',
          message: '同步成功!'
        })
      } else {
        this.$message({
          type: 'error',
          message: '同步失败！'
        })
      }
    },
    async delHandler({ id }) {
      if (!id) return
      await this.$confirm('确认要删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delPage({ id })
      this.$message.success('删除成功')
      this.fetchData()
    }
  }
}
</script>
<style scoped>
.module-checkboxes {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
}
</style>
